<template>
  <div>
    <el-card>
      <!--    面包屑-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加订单</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
      <!-- 查找 -->
      <el-row style="float:left;margin-left:5px;">
      <el-col :span="15">
        <el-input placeholder="请输入需要查询的商品ID" v-model="inputid"  clearable @clear="getList" size="mini">
        </el-input>
      </el-col>
      <el-col :span="3" style="margin-left: 5px">
        <el-button type="primary" @click="selected" size="mini">搜索</el-button>
      </el-col>
    </el-row>
    <br>
      <!-- //商品信息 -->
     <el-table :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pagesize,pageInfo.curPage*pageInfo.pagesize)" style="width: 100%;"  @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column fixed label="选择" width="50" type="selection" :reserve-selection="true"> 
      </el-table-column>
      <el-table-column fixed prop="id" label="商品ID" width="100"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
      <el-table-column prop="firstClassification" label="商品一级分类" width="120"></el-table-column>
      <el-table-column prop="secondClassification" label="商品二级分类" width="120"></el-table-column>
      <el-table-column prop="unitPrice" label="单价" width="100"></el-table-column>
      <el-table-column prop="discount" label="折扣" width="100"></el-table-column>
      <el-table-column prop="inventory" label="数量" width="100"></el-table-column>
      <el-table-column prop="shelfLife" label="保质期限" width="200"></el-table-column>
      <el-table-column prop="model" label="型号" width="200"></el-table-column>
      <el-table-column prop="supplier" label="供应商" width="200"></el-table-column>
      <el-table-column prop="vendor" label="厂家" width="200"></el-table-column>
      <el-table-column prop="productDesccription" label="商品说明" width="200"></el-table-column>
    </el-table>
    <!--    分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.curPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
        </el-pagination>
        <!-- 生产订单按钮 -->
        <el-badge v-model="multipleSelection.length" type="primary" :disabled="multipleSelection.length == 0" v-if="multipleSelection.length > 0" style="float:right">
          <el-button type="primary" size="mini"  @click="addorder()">生产订单</el-button>
        </el-badge>
        <br>
        <!-- 确定生产订单对话框 -->
        <el-dialog title="清单" :visible.sync="dialogVisible" width="50%" center>
          <el-table :data="multipleSelection">
            <el-table-column label="商品ID" prop="id" width="100px"></el-table-column>
            <el-table-column label="商品名称" prop="productName" width="130px"></el-table-column>
            <el-table-column label="数量" width="200px">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.productNum" :min="0" :max="scope.row.inventory" size="mini" @change="handleChange()"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="unitPrice"></el-table-column>
          </el-table>
          <br>
          <el-form class="demo-form-inline" label-position="left" :inline="true">
            <el-form-item label="客户名称" :required="true" >
              <el-select v-model="clientId" placeholder="请选择" size="small" class="select_css">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收件人"  :required="true">
              <el-input  v-model="receiver" size="small"></el-input>
            </el-form-item>
            <el-form-item label="收货电话"  :required="true">
              <el-input v-model="consigneephone" size="small"></el-input>
            </el-form-item>
            <el-form-item label="收件地址"  :required="true">
              <el-input  v-model="shippingAddress" size="small"></el-input>
            </el-form-item>
            <el-form-item label="订单金额" >
              <el-input  v-model="fundingInformation" size="small" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="配送日期" :required="true">
               <el-date-picker v-model="finishDate" type="date" placeholder="选择日期" size="small" style="width:190px"> </el-date-picker>
            </el-form-item>
            <el-form-item label="备注信息">
              <el-input  v-model="remark" size="small"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" size="small" @click="yes">确定</el-button>
          <el-button size="small" @click="no" style="float:right" >取消</el-button>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
    export default {
        data(){
            return{
              tableData:[],
              // 分页
              pageInfo: {
                query:'',
                curPage:1,
                pagesize:5
              },
              total:0,
              // 多选被选中的值
              multipleSelection: [],
              // 返回被选择的数据id
              getRowKeys(row) {
                return row.id;
              },
              // 对话框是否弹出
              dialogVisible:false,
              //订单人名称
              clientId:'',
              consigneephone:'',
              finishDate:'',
              fundingInformation:'',
              receiver:'',
              remark:'',
              shippingAddress:'',
              orders:[],
              userdata:[],
              options:[
                {
                  value:'',
                  label:''
                }
              ],
              inputid:''
            }
        },
        methods:{
           // 获取客户数据
            async getuserList() {
                const { data: res } = await this.$http
                    .get('/api/client_server/query_client_pageInfo')
                    .catch(err => {
                        this.$message.error('对不起，服务器异常或没有权限！请多试几次')
                        console.log(err.message)
                    })
                if (res.code !== 200) {
                    this.$message.error('获取客户信息失败')
                }
                console.log(res)
                this.userdata=res.data
                this.setoption()
            },
          //获取商品信息数据
          async getList(){
            const{data:res}=await this.$http
            .get('/api/order_manager/query_commodity')
            .catch(err=>{
              this.$message.error('对不起，服务器异常或权限不够！')
              console.log(err.message)
            })
            if(res.code!==200){
              this.$message.error('获取信息失败！')
            }
            console.log(res);
            this.tableData=res.data
            this.total=res.data.length
            console.log(this.tableData)
            this.tableData.forEach(item => {
            item.isSet=false
            console.log(this.tableData.isSet);
           });
          },
          // 分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageInfo.pagesize=val
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageInfo.curPage=val
            },
            // 返回被选数量
            handleSelectionChange(val) {
              this.multipleSelection=val
              console.log(this.multipleSelection)
              
            },
            //生产订单
            addorder(){
              this.dialogVisible=true
              this.fundingInformation=0
            },
            //监测数量改变金额
            handleChange(){
              var sum=0
              this.multipleSelection.forEach(item=>{
                if(item.unitPrice===undefined){
                  sum+=0
                }else{
                  sum+=(item.unitPrice)*(item.productNum)*(item.discount)
                }
              })
              // console.log(typeof sum)
              this.fundingInformation=sum
              console.log(typeof this.fundingInformation)
            },
            // 确定生成订单
            yes(){
              var isadd=true
              this.multipleSelection.forEach(item=>{
                console.log(item.productNum);
                if(item.productNum===undefined){
                  this.$message.error('商品ID:'+item.id+'未选择数量！')
                  isadd=false
                }
              })
               if(this.clientId===''||this.finishDate===''||this.receiver===''||this.consigneephone===''||this.shippingAddress===''||isadd===false)
                {
                  this.$message.error('信息未填写完成，请检查再提交！')
                }else{
                  this.submitneworder()
                }
            },
            //取消生成订单
            no(){
              this.dialogVisible=false
              this.multipleSelection.forEach(item=>{
                item.productNum=undefined
              })
            },
            //订单id选择器赋值
            setoption(){
              var index=0
              this.userdata.forEach(item=>{
                this.options[index]={
                  value:item.id,
                  label:item.name
                }
                // this.options[index].label=item.name
                index++
              })
            },
            // 提交订单
            async submitneworder(){
              console.log(this.fundingInformation);
              var orders=[]
              var index=0
              this.multipleSelection.forEach(item=>{
                orders[index]={
                  commodityId:item.id,
                  number:item.productNum
                }
                index++
              })
              const{data:res}=await this.$http
              .post('/api/order_manager/add_order?clientId',
              {
                clientId:Number(this.clientId),
                consigneephone:this.consigneephone,
                finishDate:this.getData(this.finishDate),
                fundingInformation:this.fundingInformation,
                orders:orders,
                receiver:this.receiver,
                remark:this.remark,
                shippingAddress:this.shippingAddress,
                operator:sessionStorage.getItem("userId")
              }
              )
              .catch((err)=>{
                this.$message.error('对不起 ,服务器异常或权限不够！')
                console.log(err.message)
              })
              console.log(res)
              if(res.code!==200){
                this.$message.error('提交信息有误！')
              }else{
                this.$message.success('提交成功！')
                this.dialogVisible=false
              }
            },
            // 返回时间
            getData(date) {
              var Y = date.getFullYear() + '-'
              var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
              var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '
              // var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'
              // var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':'
              // var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds())
              var h=0+':'
              var m=0+':'
              var s=0
              console.log(Y+M+D+h+m+s)
              return Y+M+D+h+m+s
            },
            //通过id查找商品信息
            async getcommoditybyid(){
              const inputid=this.inputid
              console.log(typeof inputid);
              const{data:res}=await this.$http
              .get(`/api/order_manager/query_commodity_by_id/${inputid}`)
              .catch(err=>{
                this.$message.error('对不起，服务器异常或权限不够！')
                console.log(err.message)
              })
              if(res.code!==200){
                this.$message.error('获取查询信息失败！')
              }else{
                // console.log(res)
                if(res.data===null){
                  this.$message.error('未查询到相关信息！')
                }else{
                  this.tableData=[]
                  this.tableData[0]=res.data
                  console.log(this.tableData)
                  this.total=this.tableData.length
                }
              }
          },
          // 搜索
            selected(){
              if(this.inputid===''){
                return this.$message.error('请输入关键信息')
              }else{
                this.getcommoditybyid()
              }
            },
        },
        created(){
          this.getList()
          this.getuserList()
        }
    }
</script>
